<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Flink实时数据分析</title>
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div class='header'>
    <p>Flink实时统计商品交易数据</p>
</div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option;

    const data = [];
    for (let i = 0; i < 6; ++i) {
        data.push(0);
    }
    option = {
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E','F'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 5
        },
        series: [
            {
                realtimeSort: true,
                name: '销售总额',
                type: 'bar',
                data: data,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
    };
    function run() {
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "/salesamount",
            dataType : "json",
            success : function(data) {
                var xdata = []
                var ydata = []
                var sum=0
                for (var i = 0;i < data.length;++i){
                    xdata.push(data[i].amount)
                    ydata.push(data[i].phoneName)
                    sum=sum+data[i].amount
                }

                myChart.setOption({
                    yAxis: {
                        data: ydata
                    },
                    series: [
                        {
                            name: '销售总额：'+sum+'元 '+new Date().toLocaleString(),
                            type: 'bar',
                            data: xdata
                        }
                    ]
                })
            }
        })
    }
    setTimeout(function () {
        run();
    }, 0);
    setInterval(function () {
        run();
    }, 1000);

    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
</script>
</body>
</html>